<template>
    <div class="qrcanvas-increase">
        <a-modal v-model:visible="visibleQRQrCode" title="">
            <a-spin size="large" :spinning="spinning">
                <canvas :key="canvasKey" :id="canvasId" width="472px" height="380px"></canvas>
                <div style="text-align: center;">
                  <a-button class="blue-btn" type="primary" @click="downloadQRCode(queryResultsImgUrl)">下载二维码</a-button>
                  <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="linkClick(codeVal)">在线链接</a-button>
                  <a-button
                    style="margin-left: 10px;"
                    class="blue-btn"
                    type="primary"
                    id="copy-code-button"
                    @click="copyLink(codeVal)">复制链接</a-button>
                </div>
            </a-spin>
            <template slot="footer">
              <a-button @click="visibleQRQrCode = false">
                  关闭
              </a-button>
          </template>
        </a-modal>
    </div>
</template>
<script>
import {qrcanvas} from 'qrcanvas'
export default {
    components:{
    },
    props:{
        id:{
            type:String,
            default:'',
            require:false
        }
    },
    data(){
        return{
            spinning:true,
            visibleQRQrCode:false,
            testPaper:{},
            newImage:new Image(),
            queryResultsQr:null,
            queryResultsImgUrl:'',
            canvasKey:null,
            canvasId:'signedVersion'+ new Date().getTime(),
            codeVal: {}
        }
    },
    watch:{
        visibleQRQrCode(newval,oldVal){
            this.spinning = true
            // if(newval){
            //     this.queryResultsQr = qrcanvas({
            //         data: bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+`/t_yjjspzx/questionnaireInvestigate?id=`+this.id   || "二维码生成中",
            //         size:260,
            //         background:'#fff'
            //     })
            //     this.queryResultsImgUrl = this.newImage.src = this.queryResultsQr.toDataURL("image/png")
            // }
        },


    },
    mounted(){

    },
    updated(){
        this.cancelLoading()
    },
    methods:{
        getData(val){
          this.codeVal = val
          //console.log('this.codeVal',this.codeVal)
            this.queryResultsQr = qrcanvas({
                data: bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+`businessManagementSatisfactionSurvey?obj=`+JSON.stringify({sqsxid:this.codeVal.sqsxid})|| "二维码生成中",
                size:260,
                background:'#fff'
            })
            this.queryResultsImgUrl = this.newImage.src = this.queryResultsQr.toDataURL("image/png")
            this.canvasKey = Date.now()
            //console.log('111')
            this.$nextTick(()=>{
                var canvas = document.getElementById(this.canvasId);
                var context = canvas.getContext('2d');
                context.font = "22px Arial"
                context.textAlign = "center"
                // context.globalCompositeOperation = 'source-in';
                context.fillStyle = "#000";
                context.background = '#fff'
                context.fillText('满意度调查',236,50);
                var img = new Image();
                img.onload = function() {
                    context.drawImage(img, 106, 80,260,260);
                }
                img.src = this.queryResultsQr.toDataURL("image/png");
            })
        },
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)

        },
        linkClick(val){
            var link = document.createElement('a');
            link.target='_blank'
            link.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+`businessManagementSatisfactionSurvey?obj=`+JSON.stringify({sqsxid:this.codeVal.sqsxid})|| "二维码生成中"
            link.click();
        },
        downloadQRCode(val){
            var canvas = document.getElementById(this.canvasId);
            var dataURL = canvas.toDataURL('image/png');
            // 创建一个链接元素
            var link = document.createElement('a');
            link.download = this.codeVal.fhyzt + '会议签到签名二维码.png'; // 设置图片名称
            link.href = dataURL; // 设置图片链接
            link.click(); // 模拟点击链接，下载图片
        },
        //一键复制
        copyLink (val) {
            var link = document.createElement('a');
            link.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+`businessManagementSatisfactionSurvey?obj=`+JSON.stringify({sqsxid:this.codeVal.sqsxid})|| "二维码生成中"

            const copyInput = document.createElement('input');
            copyInput.value = link.href;
            document.body.appendChild(copyInput);
            copyInput.select();
            document.execCommand('copy');
            document.body.removeChild(copyInput);
            this.$message.success('链接已复制！')
        },
    }

}

</script>
<style>
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .test-paper-modal .ant-modal-footer{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .paper-details{
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
 }
 .qr-img-box{
    display: flex;
    justify-content: center;
 }
.qrcanvas-increase .ant-modal-content{
    width: 520px !important;
 }
</style>
